<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <script src="./js/vue.min.js"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
	</head>
	<body>
		<div id="app">
			<div class="container" :style="{height:imgH+'px',width:imgW+'px'}">
				<img class="bg" src="./img/hcbgimg.png"/>
				
				<h4 class="oilRatio" :style="{left:imgW*0.16+'px'}">16%</h4>
				<div class="oilH" :style="{left:imgW*0.16+'px',height:oilH+'px'}"></div>
				<div class="waterH" :style="{left:imgW*0.16+'px',height:waterH+'px'}"></div>
				
				<h2 class="number">1</h2>
				<div class="content">
					<span>油品：0#</span>
					<span>油位：234.92mm</span>
					<span>水位：27.6mm</span>
					<span>油体积：0L</span>
					<span>存油重量：0kg</span>
					<span>温度：16.38℃</span>
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				originW:2036,
				originH:763,
				scaleRatio:0.2,
				imgW:0,
				imgH:0,
				oilH:60,
				waterH:20
			},
			mounted() {
				this.init();
			},
			methods: {
				init(){
					this.imgH = this.originH*this.scaleRatio;
					this.imgW = this.originW *this.scaleRatio;
				}
			}
		})
	</script>

	<style>
		* {
			padding: 0px;
			margin: 0px;
		}

		.container {
			margin-top:  0px;
			position: relative;
		}
		.bg,.oilRatio,.oilH, .waterH{
			position: absolute;
			display: inline-block;
		}

		.bg {
			width: 100%;
			top: 0;
			left: 0;
			z-index: 0;
		}
		.oilRatio{
			top: 0;
			z-index: 1;
		}
		.oilH, .waterH{
			bottom: 0;
			width: 40px;
		}
		.oilH{
			z-index: -2;
			background-color: red;
		}
		.waterH{
			z-index: -1;
			background-color: blue;
		}

		.number,
		.content {
			display: inline-block;
			position: absolute;
			top: 55%;
			transform: translateY(-50%);
			z-index: 1;
		}

		.number {
			width: 15%;
			left: 0;
			text-align: center;
		}

		.content {
			width: 70%;
			right: 0;
		}

		.content span {
			display: inline-block;
			width: 60%;
			line-height: 130%;
		}
	</style>
</html>
